<script lang="ts" setup>
import { ref } from 'vue';

defineProps({
  msg: String,
});

const count = ref(0);
</script>

<template>
  <div class="text-center">
    <h1 class="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ msg }}</h1>

    <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md mb-4">
      <button 
        type="button" 
        @click="count++"
        class="px-6 py-3 font-semibold rounded-lg shadow-md active:scale-95 transition-all duration-200 cursor-pointer"
      >
        count is {{ count }}
      </button>
      <p class="mt-4 text-gray-700 dark:text-gray-300">
        Edit
        <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-sm">components/HelloWorld.vue</code> 
        to test HMR
      </p>
    </div>

    <p class="mb-2 text-sm text-gray-700 dark:text-gray-300">
      Install
      <a 
        href="https://github.com/vuejs/language-tools" 
        target="_blank"
        class="link underline"
      >
        Volar
      </a>
      in your IDE for a better DX
    </p>
    <p class="text-gray-500 dark:text-gray-400 text-sm">
      Click on the WXT and Vue logos to learn more
    </p>
  </div>
</template>
